<template>
  <TopNav title="健康教育"/>
  <div class="chronic-disease-health-education">

    <!-- 导航栏 -->
    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="糖尿病" name="diabetes"></el-tab-pane>
      <el-tab-pane label="高血压" name="hypertension"></el-tab-pane>
      <el-tab-pane label="高血脂" name="hyperlipidemia"></el-tab-pane>
    </el-tabs>

    <!-- 知识与技能展示区 -->
    <div class="content-section">
      <!-- 糖尿病内容 -->
      <div v-if="activeTab === 'diabetes'">
        <h2 class="section-title">糖尿病营养知识与技能</h2>
        <div class="knowledge">
          <p>糖尿病患者饮食需注重平衡与控制。主食应多选择粗粮，如燕麦、糙米等，它们富含膳食纤维，能减缓碳水化合物吸收，稳定血糖。蛋白质摄入要充足且优质，像瘦肉、鱼类、豆类都是不错的选择。减少饱和脂肪与反式脂肪摄取，如动物油脂、油炸食品中的人造奶油。多吃蔬菜与低糖水果，补充维生素与矿物质的同时，增加膳食纤维摄入。</p>
        </div>
        <div class="skill">
          <h3>实用技能</h3>
          <p>学会计算食物的升糖指数（GI），了解不同食物对血糖的影响程度。例如，白米饭的 GI 值较高，而糙米饭相对较低。用餐时，先吃蔬菜和蛋白质食物，最后吃主食，有助于控制餐后血糖升高幅度。定期监测血糖，根据血糖值调整饮食结构与量。</p>
        </div>
      </div>
      <!-- 高血压内容 -->
      <div v-if="activeTab === 'hypertension'">
        <h2 class="section-title">高血压营养知识与技能</h2>
        <div class="knowledge">
          <p>高血压患者要严格控制盐摄入，每日不超过 5 克，减少食用咸菜、腌制品等高盐食物。增加钾的摄入，香蕉、土豆、菠菜等食物富含钾元素，有助于促进钠的排出，降低血压。控制体重是关键，避免高热量、高脂肪食物，如蛋糕、油炸食品。适量摄入蛋白质，以植物蛋白为主，搭配动物蛋白。</p>
        </div>
        <div class="skill">
          <h3>实用技能</h3>
          <p>掌握低盐烹饪技巧，如使用醋、柠檬汁、香料等代替盐来调味。学会看食品标签，了解食物中的钠含量，选择低钠食品。保持规律的饮食时间，避免暴饮暴食，有助于稳定血压。</p>
        </div>
      </div>
      <!-- 高血脂内容 -->
      <div v-if="activeTab === 'hyperlipidemia'">
        <h2 class="section-title">高血脂营养知识与技能</h2>
        <div class="knowledge">
          <p>对于高血脂患者，减少饱和脂肪与反式脂肪摄入极为重要，动物内脏、油炸食品、糕点中的人造奶油等应少吃。增加不饱和脂肪酸的摄取，如橄榄油、鱼油、坚果等。控制胆固醇摄入，蛋黄、蟹黄等高胆固醇食物适量食用。多吃富含膳食纤维的食物，如全麦面包、蔬菜、水果，可促进胆固醇排泄。</p>
        </div>
        <div class="skill">
          <h3>实用技能</h3>
          <p>了解食物的脂肪种类和含量，学会区分饱和脂肪、不饱和脂肪与反式脂肪。在烹饪时，优先选择清蒸、煮、炖等健康烹饪方式，减少油炸。合理搭配食物，每餐保证有蔬菜、蛋白质与适量碳水化合物，避免单一食物摄入过多。</p>
        </div>
      </div>
    </div>

    <!-- 案例展示区 -->
    <div class="case-section">
      <h2 class="section-title">成功案例分享</h2>
      <div class="case-item" v-if="activeTab === 'diabetes'">
        <p>患者王女士，患糖尿病后积极调整饮食。她将主食换成了粗粮，每天保证足够的蔬菜与优质蛋白质摄入，减少了油脂与高糖食物摄取。经过三个月的坚持，血糖得到了有效控制，空腹血糖从 8.5mmol/L 降至 6.2mmol/L，身体状况明显改善。</p>
      </div>
      <div class="case-item" v-if="activeTab === 'hypertension'">
        <p>李先生被诊断为高血压后，严格控制盐摄入，学会了低盐烹饪，增加了钾元素丰富的食物。半年后，血压从 160/100mmHg 稳定在 130/80mmHg，减少了降压药的用量。</p>
      </div>
      <div class="case-item" v-if="activeTab === 'hyperlipidemia'">
        <p>张女士患有高血脂，她调整饮食结构，减少了饱和脂肪与胆固醇摄入，增加了不饱和脂肪酸的摄入，同时配合运动。三个月后，血脂指标明显下降，总胆固醇从 7.2mmol/L 降至 5.5mmol/L。</p>
      </div>
    </div>

    <!-- 互动区 -->
    <div class="interaction-section">
      <h2 class="section-title">互动交流</h2>
      <el-input placeholder="您的问题或建议" v-model="userInput"></el-input>
      <el-button type="primary" @click="submitFeedback">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TopNav from "@/components/TopNav/Back.vue"
// 当前激活的 tab
const activeTab = ref('diabetes');
// 用户输入的互动内容
const userInput = ref('');

// 提交反馈
const submitFeedback = () => {
  if (userInput.value) {
    // 这里可以添加将用户输入发送到后端或进行其他处理的逻辑
    console.log('用户提交了反馈：', userInput.value);
    userInput.value = '';
  }
};
</script>

<style scoped>
.chronic-disease-health-education {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.tabs {
  margin-bottom: 20px;
}
.content-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.knowledge {
  margin-bottom: 20px;
}
.skill {
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.case-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.case-item {
  margin-bottom: 20px;
}
.interaction-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}
</style>
